<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="500px"
    :modal-append-to-body="true"
    :append-to-body="true"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form ref="signEdit" :model="sign" label-width="100px" :rules="rules">
      <el-form-item label="选择证书" prop="SignId">
        <el-select v-model="sign.SignId" placeholder="选择证书" clearable>
          <el-option v-for="i in signFile" :key="i.Id" :label="i.SignName+'('+moment(i.EndTime).format('YYYY-MM-DD HH:mm:ss')+')'" :value="i.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="证书密码" prop="Pwd">
        <el-input
          v-model="sign.Pwd"
          maxlength="16"
          type="password"
          placeholder="证书密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="选择签章" prop="SignImg">
        <empSignatureFile v-model="sign.SignImg" :file-uri.sync="sign.FileUri" :is-copy="false" />
      </el-form-item>
      <el-form-item label="原因" prop="Reason">
        <el-input v-model="sign.Reason" placeholder="原因" clearable />
      </el-form-item>
      <el-form-item label="位置说明" prop="Location">
        <el-input v-model="sign.Location" placeholder="位置说明" clearable />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center; margin-top: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="closeForm">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from 'moment'
import { Gets, Accredit } from '@/api/emp/empSign'
import empSignatureFile from '@/components/empFile/empSignatureFile.vue'

export default {
  components: {
    empSignatureFile
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    accreditId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      moment,
      signFile: [],
      sign: {
        SignId: null,
        Pwd: null,
        SignImg: null,
        FileUri: null,
        Location: null,
        Reason: null
      },
      title: '人员签章',
      rules: {
        SignId: [
          {
            required: true,
            message: '选择证书',
            trigger: 'blur'
          }
        ],
        SignImg: [
          {
            required: true,
            message: '选择签章',
            trigger: 'blur'
          }
        ],
        Pwd: [
          {
            required: true,
            message: '密码不能为空！',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '密码长度需在6-16位之间！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.loadSign()
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    closeForm() {
      this.$emit('update:visible', false)
    },
    reset() {
      this.sign.SignId = null
      this.sign.SignImg = null
      this.sign.FileUri = null
      this.sign.Location = null
      this.sign.Reason = null
    },
    async loadSign() {
      this.signFile = await Gets()
    },
    save() {
      this.$refs['signEdit'].validate((valid) => {
        if (valid) {
          this.set()
        } else {
          return false
        }
      })
    },
    async set() {
      const id = await Accredit({
        AccreditId: this.accreditId,
        Id: this.sign.SignId,
        Pwd: this.sign.Pwd
      })
      this.$emit('update:accreditId', id)
      this.$emit('save', {
        SignId: this.sign.SignId,
        FileId: this.sign.SignImg,
        FileUri: this.sign.FileUri,
        Location: this.sign.Location,
        Reason: this.sign.Reason,
        SignType: 2,
        Width: 120,
        Height: 120
      })
      this.$emit('update:visible', false)
    }
  }
}
</script>

